<div class="search-backdrop" ng-if="ctrl.isOpen"></div>

<div class="search-container" ng-if="ctrl.isOpen">
  <search-field
    query="ctrl.query"
    autoFocus="ctrl.giveSearchFocus"
    on-change="ctrl.onQueryChange"
    on-key-down="ctrl.onKeyDown"
  />

  <div class="search-dropdown">
    <div class="search-dropdown__col_1">
      <div class="search-results-scroller">
        <div class="search-results-container" grafana-scrollbar>
          <search-results
            results="ctrl.results"
            on-tag-selected="ctrl.filterByTag"
            on-folder-expanding="ctrl.folderExpanding"
            on-selection-changed="ctrl.selectionChanged"
          />
        </div>
      </div>
    </div>

    <div class="search-dropdown__col_2">
      <div class="search-filter-box" ng-click="ctrl.onFilterboxClick()">
        <div class="search-filter-box__header">
          <icon name="'filter'"></icon>
          Filter by:
          <a class="pointer pull-right small" ng-click="ctrl.clearSearchFilter()">
            <icon name="'times'" size="'sm'"></icon> Clear
          </a>
        </div>

        <tag-filter tags="ctrl.query.tags" tagOptions="ctrl.getTags" on-change="ctrl.onTagFiltersChanged"> </tag-filter>
      </div>

      <div class="search-filter-box" ng-if="ctrl.isEditor || ctrl.hasEditPermissionInFolders">
        <a href="dashboard/new" class="search-filter-box-link">
          <icon name="'plus-square'" size="'xl'" style="margin-right: 8px;"></icon> New dashboard
        </a>
        <a href="dashboards/folder/new" class="search-filter-box-link" ng-if="ctrl.isEditor">
          <icon name="'folder-plus'" size="'xl'" style="margin-right: 8px;"></icon> New folder
        </a>
        <a
          href="dashboard/import"
          class="search-filter-box-link"
          ng-if="ctrl.isEditor || ctrl.hasEditPermissionInFolders"
        >
          <icon name="'import'" size="'xl'" style="margin-right: 8px;"></icon> Import dashboard
        </a>
        <a
          class="search-filter-box-link"
          target="_blank"
          href="https://grafana.com/dashboards?utm_source=grafana_search"
        >
          <icon name="'apps'" size="'xl'" style="margin-right: 8px;"></icon> Find dashboards on Grafana.com
        </a>
      </div>
    </div>
  </div>
</div>
